<template>
  <div class="about">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
    <hr>

    <div>

      <el-form :inline="true" :model="leaveForm" class="demo-form-inline">
        <el-form-item label="客户姓名">
          <el-input v-model="leaveForm.username" placeholder="客户姓名"></el-input>
        </el-form-item>

        <el-form-item label="申请金额">
          <el-input v-model="leaveForm.money" placeholder="申请金额"></el-input>
        </el-form-item>
        <el-form-item label="借款期限">
          <el-input v-model="leaveForm.daynum" placeholder="借款期限"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交审批</el-button>
        </el-form-item>
      </el-form>
    </div>
    <br>
    <hr>
    <!-- 大文件上传   -->
    <div>
      <uploader :options="options" class="uploader-example"
                @file-added="onFileAdded"
                @file-success="onFileSuccess">
        <uploader-unsupport></uploader-unsupport>
        <uploader-drop>
          <uploader-btn>select files</uploader-btn>
        </uploader-drop>
        <uploader-list></uploader-list>
      </uploader>
    </div>
  </div>
</template>
<script>

import SparkMD5 from 'spark-md5';

export default {
  name: "AskForBiz",
  data() {
    return {
      leaveForm: {
        username: '',
        money: '',
        daynum:'',
        fujian:''
      },
      options: {
        target: 'http://localhost:8888/api/loans/postFileUpload', // 目标上传 URL
        chunkSize: '2048000',   //分块大小
        fileParameterName: 'file', //上传文件时文件的参数名，默认file
        maxChunkRetries: 3,  //最大自动失败重试上传次数
        testChunks: false,     //是否开启服务器分片校验
      }
    }
  },
  methods: {
      onFileSuccess(rootFile, file, response, chunk) {
        let res = JSON.parse(response);
        this.leaveForm.fujian=res.fileUrl  //给fileurl赋值,为了保存数据库

        console.log(chunk)
      },
      onFileAdded(file) {
        const fileReader = new FileReader()
        fileReader.readAsBinaryString(file);
        fileReader.onload = e => {
          const md5 = SparkMD5.hashBinary(e.target.result);
          console.log(md5);
          file.uniqueIdentifier = md5;
        }
      },
      onSubmit() {
        this.axios.post("http://localhost:8888/api/loans/ask4Biz",this.leaveForm).then(resp=>{
          alert(resp.data)
        })
      }
    }

}
</script>

<style scoped>

</style>